{% extends "mp/base.html" %}

{% block title %}充值中心{% endblock %}

{% block content %}

<div class="page__hd">
    <div  class="weui-media-box weui-media-box_appmsg" style="padding-left: 0px">
        <div class="weui-media-box__bd">
            <h4 class="weui-media-box__title"> 充值中心 </h4>
            <p class="weui-media-box__desc"> 充值多送<b>30%</b>，充的越多送的越多！🎉🎉</p>
        </div>
    </div>

    <div class="weui-media-box__desc">
        如遇充值问题，请联系微信客服 <b>QUYUEVIP </b>
    </div>
</div>

<div class="page__bd">
    <div class="weui-cells__title"> <i class="fa fa-address-card"></i> 充值账号 </div>
    <div class="weui-cells weui-cells_form">{% csrf_token %}
        <div class="weui-cell weui-cell_vcode" style="height:45px">
            <div class="weui-cell__hd"><label class="weui-label">用户ID</label></div>
            <div class="weui-cell__bd">
                <input class="weui-input" type="number" id="uid" placeholder="请输入用户ID" v-model="input_uid" @keyup="onInputUid()">
            </div>
        </div>

        <div class="weui-cell" v-cloak v-show="show_user_avatar">
            <div class="weui-cell__bd"> <p>[[ user_nickname ]]</p> </div>
            <div class="weui-cell__ft"> <img class="right_large_avatar" :src="user_avatar"> </div>
        </div>
    </div>

    <div class="weui-btn-area" v-cloak v-if="show_activity_3">
        <a class="weui-btn weui-btn_block weui-btn_primary" href="javascript:pay_with_ali(2588)"> ￥2588 买 1812+776钻 <span class="light_yellow_color">再送<b>520</b>钻</span> </a>
        <a class="weui-btn weui-btn_block weui-btn_primary" href="javascript:pay_with_ali(1388)"> ￥1388 买 971+417钻 <span class="light_yellow_color">再送<b>168</b>钻</span> </a>
        <a class="weui-btn weui-btn_block weui-btn_primary" href="javascript:pay_with_ali(588)">   ￥588 买 411+177钻 <span class="light_yellow_color">再送<b>60</b>钻</span> </a>
        <a class="weui-btn weui-btn_block weui-btn_primary" href="javascript:pay_with_ali(298)">   ￥298 买 208+90钻  <span class="light_yellow_color">再送<b>30</b>钻</span> </a>
        <a class="weui-btn weui-btn_block weui-btn_primary" href="javascript:pay_with_ali(98)">     ￥98 买 68+30钻 </a>
        <a class="weui-btn weui-btn_block weui-btn_primary" href="javascript:pay_with_ali(30)">     ￥30 买 21+9钻 </a>
    </div>
</div>

<div class="page__ft">
    <div>
        <span class="bottom-logo">
            HaiBao
       </span>
    </div>
</div>

<div id="dialogs">
    <!--BEGIN dialog2-->
    <div class="js_dialog" id="iosDialog2" style="display: none;">
        <div class="weui-mask"></div>
        <div class="weui-dialog">
            <div class="weui-dialog__bd">[[ dialog_body ]]</div>
            <div class="weui-dialog__ft">
                <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary">知道了</a>
            </div>
        </div>
    </div>
    <!--END dialog2-->
</div>


{% endblock content %}


<!-- SCRIPT
  =====================================================================-->

{% block extra_js %}

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script type="text/javascript">
    $(function(){
        $('#dialogs').on('click', '.weui-dialog__btn', function(){
            {#$(this).parents('.js_dialog').fadeOut(200);#}
        });
    });
</script>

<script>

function show_open_browser_dialog() {
    let $iosDialog2 = $('#iosDialog2');
    $iosDialog2.fadeIn(200);
}

function pay_with_ali(rmb) {
    if (is_wechat_device()) {
        show_open_browser_dialog();
        return;
    }

    const uid = $('#uid').val();
    if (!uid || uid.length === 0) {
        show_toast("请输入用户ID!");
        return;
    }
    if (!/^\d+$/.test(uid)) {
        show_toast("无效的用户ID!");
        return;
    }
    pay_with_alih5(uid, rmb);
}

new Vue({
    el: '#app',
    delimiters:['[[', ']]'],

    data: {
        {#// 是否显示充值用户的头像信息#}
        show_user_avatar: false,
        {#// 是否显示活动3#}
        show_activity_3: true,

        {#// 输入的用户id#}
        input_uid: '',
        {#// 用户的头像#}
        user_avatar: '',
        {#// 用户的昵称#}
        user_nickname: '',
        {#// 用户的充值次数#}
        user_pay_count: 0,

        dialog_body: '请点击右上角..., 选择"在Safari中打开"',
    },

    methods: {
        // 根据用户属性充值界面
        resetUi() {
            this.user_avatar = '';
            this.user_nickname = '';
            this.user_pay_count = 0;

            this.show_user_avatar = false;
            this.show_activity_3 = true;
        },

        onInputUid() {
            let url = "{% url 'mp:api_user_info' %}";
            let data = {
                'uid': this.input_uid,
            };

            if (this.input_uid == '') {
                this.resetUi();
                return;
            }

            new my_ajax(url, data, '', '', (data, message) => {
                this.user_avatar = data['avatar'];
                this.user_nickname = data['nickname'];
                this.user_pay_count = data['pay_count'];
                this.show_user_avatar = true;
            }, (message) => {
                this.resetUi();
            });
        },
    },

    mounted() {
        this.show_user_avatar = false;
        this.show_activity_3 = true;
        this.user_avatar = '';
        this.user_nickname = '';

        if (is_ios_device()) {
            this.dialog_body = '请点击右上角..., 选择"在Safari中打开"';
        } else {
            this.dialog_body = '请点击右上角..., 选择"在浏览器打开"';
        }

        if (is_wechat_device()) {
            show_open_browser_dialog();
            return;
        }
    },
});

</script>
{% endblock extra_js %}
